import React, { Component } from "react";
import { inject, observer } from "mobx-react";

@inject("todoStore")
@observer
class TodoAdd extends Component {
  handleAdd = (e) => {
    const { addTodo } = this.props.todoStore;
    if (e.key === "Enter") {
      let taskName = e.target.value;
      taskName = taskName.trim();
      if (taskName.length === 0) return;
      addTodo(taskName);
      e.target.value = "";
    }
  };
  render() {
    return (
      <header className="header">
        <h1>todos</h1>
        <input
          className="new-todo"
          onKeyUp={this.handleAdd.bind(this)}
          placeholder="What needs to be done?"
        />
      </header>
    );
  }
}

export default TodoAdd;
